<template>
  <div>
    <div id="myChart" style="width: 600px;height:400px;"></div>
  </div>
</template>>
<script>
  import echarts from 'echarts'
  export default {
      name: 'hello',
      data() {
        return {
          option: {
            title: {
                text: '在Vue中使用echarts'
              },
              tooltip: {},
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
          },
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted() {
        // this.getMenuList()
        this.drawLine()
      },
      methods: {
        // async getMenuList() {
        //   const {
        //     data: res
        //   } = await this.$http.get('reports/type/1')
        //   if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        //   this.option = res.data
        //   console.log(res.data);
        //   this.option.series = res.data.series
        //   // this.option.series = res.series
        // },
        drawLine() {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
                  myChart.setOption(this.option);

        }
      },
    }

</script>
<style>

</style>
